import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { VantResolver } from 'unplugin-vue-components/resolvers'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import postcsspxtoviewport8plugin from 'postcss-px-to-viewport-8-plugin'
import path from 'path'
import { createHtmlPlugin } from 'vite-plugin-html'
import { viteMockServe } from 'vite-plugin-mock'
import legacy from '@vitejs/plugin-legacy'

// https://vitejs.dev/config/
export default defineConfig({
  server: {
    port: 80,
    host: true,

    //开发环境下代理
    proxy: {
      // 代理 "/api" 开头的请求到后端接口
      '/easy-data-api': {
        target: 'http://134.108.25.70:10073', // 后端接口地址
        changeOrigin: true // 必须设置为 true 才能支持跨域
      },
      '/api':{
        target: 'http://134.107.67.26:8088',
      },
      '/attachments':{
        target: 'http://134.107.67.26:8088',
      },
      '/images':{
        target: 'http://134.107.67.26:8088',
      },
      '/videos':{
        target: 'http://134.107.67.26:8088',
      }
    }
  },
  plugins: [
    viteMockServe({
      // 在哪个文件夹下编写模拟接口的代码
      mockPath: './src/mock'
    }),

    createHtmlPlugin(),
    vue({}),
    Components({
      dts: false,
      resolvers: [VantResolver({ importStyle: false })]
    }),
    createSvgIconsPlugin({
      iconDirs: [path.resolve(process.cwd(), 'src/icons')]
    }),
    legacy({
      targets: ['chrome 69'],
      additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
      renderLegacyChunks: true,
      polyfills: [
        'es.promise',
        'es.array.includes'
        // 根据需要添加其他 polyfills
      ]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  css: {
    postcss: {
      plugins: [
        postcsspxtoviewport8plugin({
          unitToConvert: 'px',
          viewportWidth: 375,
          unitPrecision: 5, // 单位转换后保留的精度
          propList: ['*'], // 能转化为vw的属性列表
          viewportUnit: 'vw', // 希望使用的视口单位
          fontViewportUnit: 'vw', // 字体使用的视口单位
          selectorBlackList: [], // 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。
          minPixelValue: 1, // 设置最小的转换数值，如果为1的话，只有大于1的值会被转换
          mediaQuery: true, // 媒体查询里的单位是否需要转换单位
          replace: true, // 是否直接更换属性值，而不添加备用属性
          exclude: [/node_modules\/ant-design-vue/], // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
          include: [], // 如果设置了include，那将只有匹配到的文件才会被转换
          landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
          landscapeUnit: 'vw', // 横屏时使用的单位
          landscapeWidth: 1024 // 横屏时使用的视口宽度
        })
      ]
    }
  },
  build: {
    target: ['es2015', 'chrome69'], // 确保这里的 target 与 plugin-legacy 的目标一致
    minify: 'terser', // 使用 terser 进行压缩
    chunkSizeWarningLimit: 4096,
    terserOptions: {
      compress: {
        drop_console: true // 可选：移除 console.log 语句
      }
    },
    rollupOptions: {
      output: {
        manualChunks: {
          vue: ['vue', 'vue-router', 'pinia', '@vueuse/core'],
          antd: ['ant-design-vue', '@ant-design/icons-vue']
        }
      }
    }
  }
})
